<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<title>默认配置 Configuring defaults-JQUERY MOBILE 1.0正式版中文手册</title>
<meta name="keywords" content="JQUERY MOBILE 1.0正式版中文手册,Jquery Mobile 1.0,Jquery mobile,移动框架开发手册,darklord,JQUERY MOBILE 1.0正式版,JQUERY API,jqmapi,jqm,jquery," />
<meta name="description" content="Jquery mobile中文API站，Jquery mobile 1.0正式版本中文手册，提供最新版Jquery mobile移动web与应用开发帮助。" />
<title>有响应的布局助手 Responsive Layout Helpers-JQUERY MOBILE 1.0正式版中文手册</title>
<link rel="stylesheet" type="text/css" href="../style/Jqueryapi.css" tppabs="http://www.jqmapi.com/style/Jqueryapi.css" />
<script type="text/javascript" src="../style/lib/jquery-1.6.1.min.js" tppabs="http://www.jqmapi.com/style/lib/jquery-1.6.1.min.js"></script>
<script type="text/javascript" src="../style/jqmapi.js" tppabs="http://www.jqmapi.com/style/jqmapi.js"></script>
<link rel="shortcut icon" href="../images/favicon.ico" />
</head>
<body>
<div class="nav">
<iframe width="250px" scrolling="no" frameborder="0" allowtransparency="true" src="../nav.html" tppabs="http://www.jqmapi.com/nav.html" height="1300px"></iframe>
</div>
<div class="main">
<hr style="color:#595959;" />

<div class="content">
				<h1>媒体查询助手类 Media Query Helper Classes</h1>
				<div class="desc">Jquery Mobile给html元素增加了用来模拟浏览器的水平竖直方向以及常用的最?最大宽度css媒介查询class.这些class会在加载，调整大小以及方向变化时更新，使你能够在css中切断这些class，以创建有响应的布局，即使在不支持媒介查询的浏览器中也可以实现</div><hr />
				<h1>方向类 Orientation Classes</h1>
<div class="desc">取决于浏览器或者设备的方向，HTML元素总是会有"portrait"(竖屏)  "landscape"(横屏) class. 你可以在css中如下使用它们:</div>
                				<div class="code">.portrait {<br />
/* 垂直方向的变化的代码 */<br />
}<br />
.landscape {<br />
/* 水平方向的变化的代码 */<br />
} </div>
<hr>
				<h1>最小/最大宽度折断点Class Min/Max Width Breakpoint Classes</h1>
<div class="desc">默认情况下， 我们为如下宽度创建了折断： 320，80，68，024. 这些宽度对应着如同这样的class:"min-width-320px"，"max-width-480px"这意味着这些class可以应用在  替换(或附加)  它们模拟的等值的媒介查询</div>
                				<div class="code">.myelement { <br />
　float: none;<br />
} <br />
.min-width-480px .myelement {<br />
　float: left;<br />
} </div>
<hr>
<div class="desc">Jquery Mobile中的许多插件都利用了这些宽度折断点.例如，当浏览器宽度在480以上时，表单元素会浮动在label的旁边. 约束表单文本框的CSS在支持这样的行为时看起来像这样:</div>
<div class="code">label.ui-input-text { <br />
　display: block; <br />
}<br />
.min-width-480px label.ui-input-text { <br />
　display: inline-block; <br />
}</div>
<hr>
				<h1>添加宽度折断点 Adding Width Breakpoints</h1>
<div class="desc">要利用你自己的宽度折断点。Jquery Mobile公开$.mobile.addResolutionBreakpoints 函数，该函数接受一个数字或者数字的数组，这些值无论何时在函数被应用到时会被添加到min/max折断点中.</div>
                				<div class="code">
                				  <p>//添加一个1200像素的最大/最小折断点<br />
                				    $.mobile.addResolutionBreakpoints(1200);</p>
                				  <p>&nbsp;</p>
                				  <p>///添加一个1200像素和1400像素2个最大/最小折断点<br />
               				      $.mobile.addResolutionBreakpoints([1200,1440]);</p>
                				</div><hr>
				<h1>Running Media Queries 运行媒介查询</h1>      
<div class="desc">Jquery Mobile 提供一个函数允许你来测试是否有特殊的css 媒介查询生效，只需调用 $.mobile.media()然后传递一个media type 或 query即可.如果浏览器支持你传递的那种type或query，它会立即生效，函数会返回true，否则会返回false.</div> 
                           				<div class="code">
                				  <p>//测试屏幕媒体类型<br />
                				    $.mobile.media(&quot;screen&quot;);</p>
                				  <p>&nbsp;</p>
                				  <p>//测试最小宽度的媒介查询<br />
                				    $.mobile.media(&quot;screen and (min-width: 480px)&quot;);</p>
                				  <p>&nbsp;</p>
                				  <p>//测试是否为苹果4代手机的屏幕（视网膜）<br />
                				    $.mobile.media(&quot;screen and (-webkit-min-device-pixel-ratio: 2)&quot;);</p>
                                </div><hr>                              
</div>
</div>
<iframe id="iFrame1" width="160px" scrolling="no" frameborder="0" allowtransparency="true" src="../adsense_r.html" tppabs="http://www.jqmapi.com/adsense_r.html" onload="this.height=iFrame1.document.body.scrollHeight" ></iframe>
</body>
</html>



